function qs(element) {
    return document.querySelector(element)
}

// 简写  箭头函数  return

// const qs = (element) => document.querySelector(element)

// console.log(qs('#province'));



// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426


// 省市区渲染 ==>  ajax 获取到省市区的数据 + map + join + innerHTML
// 默认让安徽省显示 ==> 去设置下拉框的值伪安徽省的结果  value属性


// 设置请求根路径
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'


async function init() {
    const { data: res } = await axios.get('/city/province')
    // console.log(res.data);  // 省份数组

    // map join  渲染
    const provinceStr = res.data.map(item => `
    <option value="${item.province}">${item.name}</option>
    `).join('')
    // console.log(provinceStr);

    qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr


    // 设置默认安徽省
    qs('#province').value = 34


    // ===================  获取安徽省下所有的市  ==========

    const { data: { data: cityData } } = await axios.get('/city/city', {
        params: {
            provinceCode: '34',
        }
    })
    // console.log(cityData);

    const cityStr = cityData.map(item => `
    <option value="${item.city}">${item.name}</option>
    `).join('')
    // console.log(cityStr);

    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr


    // 设置默认合肥市
    qs('#city').value = '01'   //  这里注意带引号



    // ==================  获取合肥市下所有的区  ==========

    const { data: { data: areaData } } = await axios.get('/city/area', {
        params: {
            provinceCode: '34',
            cityCode: '01'
        },
    })
    // console.log(areaData);
    const areaStr = areaData.map(item => `
            <option value="${item.area}">${item.name}</option>
        `).join('')
    // console.log(areaStr);


    qs('#county').innerHTML = '<option value="">请选择市区</option>' + areaStr


    // 默认选择瑶海区
    qs('#county').value = '02'
}
init()


// todo =============  省发生改变的时候，市也随之发生改变  =========
// 注册change事件

qs('#province').addEventListener('change', async function () {
    console.log(this.value);

    // ajax发送请求，来获取指定省对应的城市数据，渲染到城市的下拉框

    const { data: { data: cityData } } = await axios.get('/city/city', {
        params: {
            provinceCode: this.value,
        }
    })
    //  * console.log(cityData);

    const cityStr = cityData.map(item => `
    <option value="${item.city}">${item.name}</option>
    `).join('')
    // console.log(cityStr);

    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr

    // ! 解决bug
    qs('#county').innerHTML = '<option value="">请选择区县</option>'

})

// todo ================ 市发生改变的时候，区随之改变  ===========
qs('#city').addEventListener('change', async function () {

    console.log(this.value);

    const { data: { data: areaData } } = await axios.get('/city/area', {
        params: {
            provinceCode: qs('#province').value,
            cityCode: this.value
        },
    })
    // console.log(areaData);
    const areaStr = areaData.map(item => `
            <option value="${item.area}">${item.name}</option>
        `).join('')
    // console.log(areaStr);


    qs('#county').innerHTML = '<option value="">请选择市区</option>' + areaStr
})